<template>
    <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image.img"  style="width: 171px;"/>
        </van-swipe-item>
    </van-swipe>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);

export default {
    data() {
        return {
            images: [
                'https://img01.yzcdn.cn/vant/apple-1.jpg',
                'https://img01.yzcdn.cn/vant/apple-2.jpg',
            ],
        };
    },
    methods:{
      async  getBanner() {
            const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/banner/list')
            this.images = res.data;
        }
    }
    ,
    mounted() {
        this.getBanner() 
    }
};

</script>

<style scoped>
.van-swipe-item {
    width: 3.42rem;
    height: 5rem;
    border-radius: .12rem;
}
.van-swipe-item img{
    width: 100%;
    height: 100%;
    border-radius: .12rem;
}
.van-swipe__indicator, .van-swipe__indicator--active{
    width: .16rem;
    height: .16rem;

}
 ::v-deep .van-swipe__indicator--active{
    background: rgb(255, 80, 0);
 }
</style>